<template>
	<div class="app-container">
		<el-form
			v-show="showSearch"
			ref="queryForm"
			:model="queryParams"
			:inline="true"
			label-width="68px"
		>
			<el-form-item label="名称" prop="name">
				<el-input
					v-model="queryParams.name"
					placeholder="请输入名称"
					clearable
					size="small"
					style="width: 240px"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item :label="$t('elButton.establishTime')">
				<el-date-picker
					v-model="dateRange"
					size="small"
					style="width: 240px"
					value-format="yyyy-MM-dd"
					type="daterange"
					range-separator="-"
					:start-placeholder="$t('elButton.startTime')"
					:end-placeholder="$t('elButton.endTime')"
				/>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="queryParams.status" placeholder="请选择">
					<el-option
						v-for="item in statusOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					@click="handleQuery"
					>{{ $t('elButton.search') }}</el-button
				>
				<el-button
					icon="el-icon-refresh-right"
					size="mini"
					@click="resetQuery"
					>{{ $t('elButton.reset') }}</el-button
				>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					v-hasPerm="['backup_add']"
					type="primary"
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					>{{ $t('elButton.add') }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPerm="['backup_restore']"
					type="success"
					icon="el-icon-edit"
					size="mini"
					:disabled="single"
					@click="handleEditor"
					>{{ '修改' }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPerm="['backup_del']"
					type="danger"
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDel"
					>{{ $t('elButton.delete') }}
				</el-button>
			</el-col>
			<div class="top-right-btn">
				<el-tooltip
					class="item"
					effect="dark"
					:content="$t('elButton.refresh')"
					placement="top"
				>
					<el-button
						size="mini"
						circle
						icon="el-icon-refresh"
						@click="handleQuery"
					/>
				</el-tooltip>
				<el-tooltip
					class="item"
					effect="dark"
					:content="
						showSearch ? $t('elButton.hideSearch') : $t('elButton.showSearch')
					"
					placement="top"
				>
					<el-button
						size="mini"
						circle
						icon="el-icon-search"
						@click="showSearch = !showSearch"
					/>
				</el-tooltip>
			</div>
		</el-row>

		<el-table
			v-loading="loading"
			:data="backupList"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="名称" align="center" prop="name" />
			<el-table-column
				label="创建时间"
				align="center"
				prop="name"
				:show-overflow-tooltip="true"
			>
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.createTime) }}</span>
				</template>
			</el-table-column>

			<el-table-column
				label="状态"
				align="center"
				prop="status"
				:show-overflow-tooltip="true"
			>
				<template slot-scope="scope">
					{{ handleStatus(scope.row.status) }}
				</template>
			</el-table-column>

			<el-table-column
				label="备注"
				align="center"
				prop="remarks"
				:show-overflow-tooltip="true"
			/>

			<el-table-column
				:label="$t('equipment.control')"
				align="center"
				class-name="small-padding fixed-width"
				width="180"
				fixed="right"
			>
				<template slot-scope="scope">
					<el-button
						v-hasPerm="['backup_restore']"
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleEditor(scope.row)"
						>修改
					</el-button>
					<el-button
						v-hasPerm="['backup_del']"
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDel(scope.row)"
						>{{ $t('elButton.delete') }}
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.current"
			:limit.sync="queryParams.size"
			@pagination="getList"
		/>

		<!-- 添加修改 -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			width="900px"
			:modal-append-to-body="true"
			:append-to-body="true"
			:close-on-click-modal="false"
		>
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-row>
					<el-col :span="11">
						<el-form-item :label="$t('calling.name')" prop="name">
							<el-input
								v-model="form.name"
								:placeholder="$t('calling.nameInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="13">
						<el-form-item label="状态" prop="status">
							<el-select v-model="form.status">
								<el-option
									v-for="dict in statusOptions"
									:key="dict.value"
									:label="dict.label"
									:value="dict.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="备注" prop="remarks">
							<el-input
								v-model="form.remarks"
								type="textarea"
								rows="5"
								:placeholder="$t('dictionaries.ipAddressInput')"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="节假日管理" prop="fields">
							<el-button @click="fieldAdd">{{
								$t('dictionaries.add')
							}}</el-button>
							<el-table :data="holidayDetail" style="margin-top:10px">
								<el-table-column
									:label="$t('calling.name')"
									align="center"
									prop="name"
									width="220"
								>
									<template slot-scope="scope">
										<el-input v-model="scope.row.name" />
									</template>
								</el-table-column>
								<el-table-column
									label="开始时间"
									align="center"
									prop="startDate"
								>
									<template slot-scope="scope">
										<el-date-picker
											v-model="scope.row.startDate"
											type="date"
											value-format="yyyy-MM-dd"
											placeholder="选择日期"
										>
										</el-date-picker>
									</template>
								</el-table-column>
								<el-table-column label="结束时间" align="center" prop="endDate">
									<template slot-scope="scope">
										<el-date-picker
											v-model="scope.row.endDate"
											type="date"
											value-format="yyyy-MM-dd"
										>
										</el-date-picker>
									</template>
								</el-table-column>
								<el-table-column
									:label="$t('equipment.control')"
									align="center"
									class-name="small-padding fixed-width"
									width="80"
								>
									<template slot-scope="scope">
										<el-button
											size="mini"
											type="text"
											icon="el-icon-delete"
											@click="fieldDel(scope.row.name)"
										>
											{{ $t('dictionaries.remove') }}
										</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">{{
					$t('submitText')
				}}</el-button>
				<el-button @click="cancel">{{ $t('cancelText') }}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	getHolidayPlanList,
	getHolidayPlanDetial,
	addHolidayPlan,
	updateHolidayPlan,
	removeHolidayPlan,
	addHoliday,
	removeHoliday,
} from '@/api/system/holidayManage'

export default {
	name: 'Backup',
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 总条数
			total: 0,
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 日期范围
			dateRange: [],
			// 查询备份
			queryParams: {
				current: 1,
				size: 10,
				name: undefined,
				key: undefined,
				isSys: undefined,
			},
			// 显示搜索条件
			showSearch: true,
			// 表单备份
			form: {},
			// 表单校验
			rules: {
				remarks: [
					{
						required: true,
						message: this.$t('equipment.remarksEmpty'),
						trigger: 'blur',
					},
				],
				name: [
					{
						required: true,
						message: '名字不能为空',
						trigger: 'blur',
					},
				],
				status: [
					{
						required: true,
						message: '状态不能为空',
						trigger: 'blur',
					},
				],
			},
			statusOptions: [{ label: '启用', value: 1 }, { label: '停用', value: 0 }],
			// 节假日详情
			holidayDetail: [],
		}
	},
	created() {
		this.getList()
	},
	methods: {
		/** 查询备份列表 */
		getList() {
			this.loading = true
			getHolidayPlanList(
				this.addDateRange(this.queryParams, this.dateRange)
			).then((response) => {
				this.backupList = response.data
				this.total = response.total
				this.loading = false
			})
		},
		// 处理状态的显示
		handleStatus(status) {
			let title = ''
			this.statusOptions.forEach((item) => {
				if (item.value === status) {
					title = item.label
				}
			})
			return title
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.reset()
		},
		// 表单重置
		reset() {
			this.form = {
				name: undefined,
				status: undefined,
				remarks: '',
			}
      this.holidayDetail = []
			this.resetForm('form')
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.current = 1
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.dateRange = []
			this.resetForm('queryForm')
			this.queryParams = {}
			this.handleQuery()
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset()
			this.open = true
			this.title = '添加节假日管理'
		},
		/** 数据字段移除 */
		fieldDel(name) {
			const tempList = this.holidayDetail
			this.holidayDetail = []
			if (tempList.length > 0) {
				tempList.forEach((element) => {
					if (element.name !== name) {
						this.holidayDetail.push(element)
					}
				})
			}
		},
		/** 数据字段添加 */
		fieldAdd() {
			this.holidayDetail.push({ endDate: '', name: '', startDate: '' })
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		/** 编辑按钮操作 */
		async handleEditor(row) {
			this.reset()
      this.title = '修改节假日管理'
			const id = row.id || this.ids
			const { data } = await getHolidayPlanDetial(id)
			this.form = data
			const { holidayList } = data
			this.holidayDetail = holidayList
			this.open = true
		},
		/** 提交按钮 */
		submitForm: function() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.form.holidayList = this.holidayDetail
					if (this.form.id !== undefined) {
						updateHolidayPlan(this.form).then((response) => {
							if (response.code === 0) {
								this.msgSuccess(this.$t('equipment.reductionSuccess'))
								this.open = false
								this.getList()
							} else {
								this.msgError(response.msg)
							}
						})
					} else {
						addHolidayPlan(this.form).then((response) => {
							if (response.code === 0) {
								this.msgSuccess(this.$t('addSuccess'))
								this.open = false
								this.getList()
							} else {
								this.msgError(response.msg)
							}
						})
					}
				}
			})
		},
		/** 删除按钮操作 */
		handleDel(row) {
			const ids = row.id || this.ids
			this.$confirm(
				this.$t('equipment.deleteRemarks') +
					ids +
					this.$t('equipment.deleteEquipment2'),
				this.$t('warning'),
				{
					confirmButtonText: this.$t('submitText'),
					cancelButtonText: this.$t('cancelText'),
					type: 'warning',
				}
			)
				.then(function() {
					return removeHolidayPlan(ids)
				})
				.then(() => {
					this.getList()
					this.msgSuccess(this.$t('deleteSuccess'))
				})
				.catch(function() {})
		},
	},
}
</script>
